<template>
	<view class="container">
		<view class="logo"></view>
		<view class="name">未成年人保护预警客户端</view>
		<!-- 基础表单校验 -->
		<uni-forms ref="valiForm" :modelValue="valiFormData" label-position="top">
			<uni-forms-item label="" required name="name">
				<uni-easyinput :focus="nameInputFocus" v-model="valiFormData.name" placeholder="请输入账户">
					<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="" required name="password">
				<uni-easyinput :focus="passwordFocus" v-model="valiFormData.password" placeholder="请输入密码"
					type="password" />
			</uni-forms-item>
			<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
				<view class="iconfont icon-code icon"></view>
				<uni-easyinput v-model="valiFormData.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
				<view class="login-code">
					<image :src="codeUrl" @click="getCode" class="login-code-img" style="width: 350rpx"></image>
				</view>
			</view>
		</uni-forms>
		<view class="space"></view>
		<button type="primary" @click="submit(valiForm)">登 录</button>
		<view class="copyright">© 湖南超云信息科技有限公司 版权所有</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from "vue";
	import {
		HOST
	} from "../../static/js/const";

	const codeUrl = ref("");
	const captchaEnabled = ref(true);

	const valiForm = ref();
	const nameInputFocus = ref(false);
	const passwordFocus = ref(false);
	const valiFormData = reactive({
		name: '',
		password: '',
		code: "",
		uuid: ""
	});

	const rules = ref({
		name: {
			rules: [{
				required: true,
				errorMessage: '账户不能为空'
			}]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '密码不能为空'
			}]
		}
	})

	function submit(ref) {
		ref.validate().then(res => {
			if (valiFormData.name.length === 0) {
				uni.showToast({
					title: `账户不能为空`,
					icon: "error"
				});
				nameInputFocus.value = true;
				return;
			}

			if (valiFormData.password.length === 0) {
				uni.showToast({
					title: `密码不能为空`,
					icon: "error"
				});
				passwordInputRef.value = true;
				return;
			}
			
			const data = {
			  "username": valiFormData.name,
			  "password": valiFormData.password,
			  "code": valiFormData.code,
			  "uuid": valiFormData.uuid
			}
			
			uni.request({
				url: `${HOST}/login`,
				method: 'POST',
				data: data,
				headers: {
				  isToken: false
				},
				success: (res) => {
					if (res['data']["code"] === 200 && res['data']["token"].length > 0) {
						uni.setStorageSync('accessToken', res['data']["token"]);
			
						uni.showToast({
							title: `校验通过`,
							icon: "success"
						});
			
						uni.switchTab({
							url: '/pages/early-warning-list/index',
							success: function() {
								console.log('跳转成功');
							},
							fail: function() {
								console.log('跳转失败');
							}
						});
					} else {
						uni.showModal({
							title: '', // 标题
							content: res['data']["msg"], // 提示内容
							showCancel: false, // 不显示取消按钮
							confirmText: '确定' // 确认按钮文本
						});
					}
				},
				fail: (err) => {
					console.error('请求失败', err);
					uni.showToast({
						title: "连接失败",
						icon: "error"
					});
				}
			});

			// uni.request({
			// 	url: `${HOST}/login`,
			// 	method: 'POST',
			// 	data: {
			// 		"username": valiFormData.name,
			// 		"password": valiFormData.password
			// 	},
			// 	header: {
			// 		'content-type': 'application/json'
			// 	},
			// 	success: (res) => {
			// 		if (res['data']["code"] === 200 && res['data']["token"].length > 0) {
			// 			uni.setStorageSync('accessToken', res['data']["token"]);

			// 			uni.showToast({
			// 				title: `校验通过`,
			// 				icon: "success"
			// 			});

			// 			uni.switchTab({
			// 				url: '/pages/early-warning-list/index',
			// 				success: function() {
			// 					console.log('跳转成功');
			// 				},
			// 				fail: function() {
			// 					console.log('跳转失败');
			// 				}
			// 			});
			// 		} else {
			// 			uni.showModal({
			// 				title: '', // 标题
			// 				content: res['data']["msg"], // 提示内容
			// 				showCancel: false, // 不显示取消按钮
			// 				confirmText: '确定' // 确认按钮文本
			// 			});
			// 		}
			// 	},
			// 	fail: (err) => {
			// 		console.error('请求失败', err);
			// 		uni.showToast({
			// 			title: "连接失败",
			// 			icon: "error"
			// 		});
			// 	}
			// });
		}).catch(err => {
			console.log('err', err);
		})
	};

	function getCode() {
		getCodeImg().then(res => {
			captchaEnabled.value = res.captchaEnabled === undefined ? true : res.data.captchaEnabled;
			console.log("getCodeImg");
			console.log(res);
			if (captchaEnabled.value) {
				codeUrl.value = 'data:image/gif;base64,' + res.data.img
				valiFormData.uuid = res.uuid
			}
		})
	}

	// 获取验证码
	function getCodeImg() {
		return uni.request({
			'url': `${HOST}/captchaImage`,
			headers: {
				isToken: false
			},
			method: 'get',
			timeout: 20000
		})
	}
	
	onMounted(() => {
		getCode();
	})
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 100rpx;
		height: 100vh;
		background-image: url("/static/bg.png");
		background-size: cover;
	}

	.logo {
		padding-top: 100rpx;
		height: 150rpx;
		background-image: url("/static/logo.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 150rpx 150rpx;

		img {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.name {
		font-size: $myuni-font-size-super-lg;
		text-align: center;
		margin-bottom: $myuni-spacing-super-lg;
		// font-family: "黑体";
		font-weight: bold;
	}

	.container::v-deep .uni-easyinput__content-input {
		height: 40px;
		line-height: 40px;
		background: none !important;
	}

	.container::v-deep .uni-forms-item__content {
		background: #F7F7FF !important;
	}

	.container::v-deep .uni-easyinput__content {
		background: #F7F7FF !important;
	}

	.container::v-deep .uni-forms-item__label {
		display: none !important;
	}

	.container::v-deep .is-input-border {
		border: none;
	}

	.uni-easyinput__placeholder-class {
		font-size: $myuni-font-size-base !important;
	}

	.copyright {
		font-size: $myuni-font-size-sm;
		color: $myuni-text-color-grey;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
	}
</style>